import React from 'react';
import { Col, Radio, Row, Icon, Upload, Button, message } from 'antd';
import styles from '@/pages/Account/accessSettings/siteAccess.css';
import entranceWebSeatRightBottom from '../../../assets/accessSettings/浮动-a.png';
import entranceWebSeatRightCenter from '../../../assets/accessSettings/浮动-c.png';
import entranceH5SeatRightBottom from '../../../assets/accessSettings/h5-a.png';
import entranceH5SeatRightCenter from '../../../assets/accessSettings/he-b.png';
import entranceH5SeatBottom from '../../../assets/accessSettings/h5-c.png';
import { ChromePicker } from 'react-color';

class RightAccess extends React.Component{
  constructor(props) {
    super(props);
    this.state = {
      entranceFlag:1,
      entranceWebImgList:[
        '/robotConfigImg/kefu.png',
        '/robotConfigImg/robot.png',
        '/robotConfigImg/kefu-squ.png',
        '/robotConfigImg/kefu-vertical.png'
      ],
      entranceH5ImgList:[
        '/robotConfigImg/kefu.png',
        '/robotConfigImg/robot.png',
        '/robotConfigImg/kefu-squ.png',
        '/robotConfigImg/kefu-vertical.png',
      ],
      entranceWebImg:'',
      entranceH5Img:'',
      entranceH5Seat:'',
      entranceWebSeat:'',
      iconBottomColor:'',
      isShowBottomColorPicker:false
    }
  }

  componentDidMount() {
    this.props.onRef(this)
  }

  initData = data => {
    this.setState({
      entranceFlag:data.entranceFlag,
      entranceWebImg:data.entranceWebImg,
      entranceH5Img:data.entranceH5Img,
      entranceWebSeat:data.entranceWebSeat,
      entranceH5Seat:data.entranceH5Seat,
      iconBottomColor:data.iconBottomColor
    })
  }

  /**
   * 入口图标状态
   * @returns {*}
   */
  changeEntranceFlag = e => {
    this.setState({
      entranceFlag:e.target.value
    })
  }

  handleChangeImage = (info,type) => {
    if (info.file.status === 'done') {
      switch (type) {
        case 'entranceWebImg':
          this.setState({
            entranceWebImg:info.file.response.url
          })
          break;
        case 'entranceH5Img':
          this.setState({
            entranceH5Img:info.file.response.url
          })
          break;
      }
    }
  }

  beforeUpload = file => {
    let b = /\.(png|jpg|gif)$/;
    let a = file.name.toLowerCase();

    const pig = b.test(a);
    const isJPG = file.type;
    const isLt2M = file.size / 1024 / 1024 < 2;

    if (!pig) {
      if (!isLt2M) {
        message.error('请上传小于2M的图片');
      } else {
        message.error('请上传图片格式');
      }
    } else {
      if (!isLt2M) {
        message.error('请上传小于2M的图片');
      }
    }
    return isJPG && isLt2M && pig;
  };

  changeImg = (item,type) => {
    switch (type) {
      case 'entranceWebImg':
        this.setState({
          entranceWebImg:item
        });
        break;
      case 'entranceH5Img':
        this.setState({
          entranceH5Img:item
        })
        break;
    }
  }

  changeEntranceWebSeat = e => {
    this.setState({
      entranceWebSeat:e.target.value
    })
  }

  changeEntranceH5Seat = e => {
    this.setState({
      entranceH5Seat:e.target.value
    })
  }

  showBottomColor = () => {
    this.setState({
      isShowBottomColorPicker:true
    })
  }

  handleCloseBottomColor = () => {
    this.setState({
      isShowBottomColorPicker:false
    })
  }

  changeBottomColor = color => {
    this.setState({
      iconBottomColor: color.hex
    })
  }

  render() {
    const {
      entranceFlag,
      entranceWebImgList,
      entranceWebImg,
      entranceH5ImgList,
      entranceH5Img,
      entranceWebSeat,
      entranceH5Seat,
      iconBottomColor,
      isShowBottomColorPicker
    } = this.state;
    return (
      <div>
        <Row>
          <Col span={4} className={styles.rightTitle}>入口图标状态:</Col>
          <Col span={19}>
            <Radio.Group onChange={this.changeEntranceFlag} value={entranceFlag}>
              <Radio value={1}>显示</Radio>
              <Radio value={2}>隐藏</Radio>
            </Radio.Group>
          </Col>
        </Row>
        <Row style={{marginTop:24}}>
          <Col span={5} className={styles.rightTitle}>
            <div>入口图标样式:</div>
            <div className={styles.titleTips}>电脑端web</div>
          </Col>
          <Col span={19}>
            <div className={styles.entranceWebBox}>
              {
                entranceWebImgList.map((item,index) => {
                  return (
                    <div className={styles.imgBox} key={index}>
                      <div key={index} className={styles.entranceWebImgBox} onClick={() => this.changeImg(item,'entranceWebImg')}>
                        <img src={item} className={styles.entranceWebImg} />
                      </div>
                      {
                        entranceWebImg === item ?
                          <Icon type={'check-circle'} className={styles.iconCheck} /> : ''
                      }
                    </div>
                  )
                })
              }
              <div className={styles.entranceWebImgBox} style={{position:'relative'}}>
                <Upload
                  name="file"
                  listType="picture"
                  className="avatar-uploader"
                  showUploadList={false}
                  action="/cloud/file/upload"
                  beforeUpload={this.beforeUpload}
                  onChange={(info) => this.handleChangeImage(info,'entranceWebImg')}
                  accept=".png,.jpg"
                >
                  {
                    entranceWebImg && entranceWebImgList.indexOf(entranceWebImg) === -1 ?
                      <div>
                        <img src={entranceWebImg} style={{ width: 74, height: 74 }} />
                        <Icon type={'check-circle'} className={styles.iconCheck} />
                      </div>
                      :
                      <Button size={'small'}>选择文件</Button>
                  }
                </Upload>
              </div>
            </div>

          </Col>
        </Row>
        <Row style={{marginTop:24}}>
          <Col span={5} className={styles.rightTitle}>
            <div>入口图标样式:</div>
            <div className={styles.titleTips}>移动端H5</div>
          </Col>
          <Col span={19}>
            <div className={styles.entranceWebBox}>
              {
                entranceH5ImgList.map((item,index) => {
                  return <div className={styles.imgBox} key={index}>
                    <div key={index} className={styles.entranceWebImgBox} onClick={() => this.changeImg(item,'entranceH5Img')}>
                      <img src={item} className={styles.entranceWebImg} />
                    </div>
                    {
                      entranceH5Img === item ?
                        <Icon type={'check-circle'} className={styles.iconCheck} /> : ''
                    }
                  </div>

                })
              }
              <div className={styles.entranceWebImgBox} style={{position:'relative'}}>
                <Upload
                  name="file"
                  listType="picture"
                  className="avatar-uploader"
                  showUploadList={false}
                  action="/cloud/file/upload"
                  beforeUpload={this.beforeUpload}
                  onChange={(info) => this.handleChangeImage(info,'entranceH5Img')}
                  accept=".png,.jpg"
                >
                  {
                    entranceH5Img && entranceH5ImgList.indexOf(entranceH5Img) === -1 ?
                      <div>
                        <img src={entranceH5Img} style={{ width: 74, height: 74 }} />
                        <Icon type={'check-circle'} className={styles.iconCheck} />
                      </div>
                      :
                      <Button size={'small'}>选择文件</Button>
                  }
                </Upload>
              </div>

            </div>

          </Col>
        </Row>
        <Row style={{marginTop:24}}>
          <Col span={5} className={styles.rightTitle}>
            <div>入口图标位置:</div>
            <div className={styles.titleTips}>电脑端web</div>
          </Col>
          <Col span={19}>
            <div className={styles.winSize} style={{marginLeft:12}}>
              <img src={entranceWebSeatRightBottom}/>
              <img src={entranceWebSeatRightCenter} style={{ marginLeft: 20 }} />
            </div>
            <Radio.Group className={styles.winSize} style={{marginLeft:12}} value={entranceWebSeat} onChange={this.changeEntranceWebSeat}>
              <Radio style={{ marginLeft: 24, marginTop: 10 }} value={1}>
                右下角
              </Radio>
              <Radio style={{ marginLeft: 35, marginTop: 10 }} value={2}>
                右侧中部
              </Radio>
            </Radio.Group>
          </Col>
        </Row>
        <Row style={{marginTop:24}}>
          <Col span={5} className={styles.rightTitle}>
            <div>入口图标位置:</div>
            <div className={styles.titleTips}>移动端H5</div>
          </Col>
          <Col span={19}>
            <div className={styles.winSize} style={{marginLeft:12}}>
              <img src={entranceH5SeatRightBottom}/>
              <img src={entranceH5SeatRightCenter} style={{ marginLeft: 60 }} />
              <img src={entranceH5SeatBottom} style={{ marginLeft: 60 }} />
            </div>
            <Radio.Group className={styles.winSize} style={{marginLeft:12}} value={entranceH5Seat} onChange={this.changeEntranceH5Seat}>
              <Radio style={{ marginLeft: 8, marginTop: 10 }} value={1}>
                右下角
              </Radio>
              <Radio style={{ marginLeft: 35, marginTop: 10 }} value={2}>
                右侧中部
              </Radio>
              <Radio style={{ marginLeft: 35, marginTop: 10 }} value={3}>
                底部
              </Radio>
            </Radio.Group>
            {
              entranceH5Seat === 3 ?
                <div className={styles.winSize} style={{marginLeft:12,marginTop:10}}>
                  <div style={{paddingRight:10}}>底部入口背景颜色:</div>
                  <div>
                    <div className={styles.winSize}>
                      <div style={{background:iconBottomColor,width:20,height:20}} className={styles.webWinColor} onClick={this.showBottomColor} />
                      <span>{iconBottomColor}</span>
                      {
                        isShowBottomColorPicker ? (
                          <div style={{ position: 'absolute',zIndex: '2' }}>
                            <div style={{ position: 'fixed',top: '0px',right: '0px',bottom: '0px',left: '0px', }} onClick={this.handleCloseBottomColor} />
                            <ChromePicker
                              color={iconBottomColor}
                              onChangeComplete={this.changeBottomColor}
                            />
                          </div>
                        ):''
                      }
                    </div>
                  </div>
                </div>
                :''
            }
          </Col>
        </Row>
      </div>
    );
  }
}

export default RightAccess;
